<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= stock.name %> - 股票详情</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>
    <style>
        .price-up { color: #dc3545; }
        .price-down { color: #198754; }
        .price-equal { color: #6c757d; }
        .filter-form {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        /* 移动端优化 */
        @media (max-width: 768px) {
            .container-fluid {
                padding: 10px;
            }
            
            .card {
                margin-bottom: 15px;
            }
            
            .card-body {
                padding: 15px;
            }
            
            .filter-form {
                padding: 15px;
            }
            
            .row .col-md-3 {
                margin-bottom: 10px;
            }
            
            .btn {
                width: 100%;
                margin-bottom: 10px;
                min-height: 44px;
            }
            
            .table {
                font-size: 12px;
            }
            
            .table th,
            .table td {
                padding: 6px 4px;
                white-space: nowrap;
            }
            
            .table th {
                font-size: 11px;
            }
            
            h1 {
                font-size: 24px;
            }
            
            h5 {
                font-size: 16px;
            }
            
            .pagination {
                justify-content: center;
            }
            
            .pagination .page-link {
                padding: 8px 12px;
                min-height: 44px;
                display: flex;
                align-items: center;
            }
        }
        
        @media (max-width: 480px) {
            .container-fluid {
                padding: 5px;
            }
            
            .card-body {
                padding: 10px;
            }
            
            .filter-form {
                padding: 10px;
            }
            
            .table {
                font-size: 10px;
            }
            
            .table th,
            .table td {
                padding: 4px 2px;
            }
            
            h1 {
                font-size: 20px;
            }
            
            h5 {
                font-size: 14px;
            }
        }
        
        /* 触摸设备优化 */
        @media (hover: none) and (pointer: coarse) {
            .btn:hover {
                transform: none;
            }
            
            .btn:active {
                transform: scale(0.95);
                transition: transform 0.1s;
            }
            
            .page-link:hover {
                transform: none;
            }
            
            .page-link:active {
                transform: scale(0.95);
            }
        }
        
        /* Flatpickr 自定义样式 */
        .flatpickr-input {
            cursor: pointer;
        }
        
        .flatpickr-input:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
        
        /* 移动端 flatpickr 优化 */
        @media (max-width: 768px) {
            .flatpickr-calendar {
                font-size: 14px;
            }
            
            .flatpickr-day {
                height: 35px;
                line-height: 35px;
                max-width: 35px;
            }
            
            .flatpickr-months .flatpickr-month {
                height: 35px;
            }
            
            .flatpickr-current-month .flatpickr-monthDropdown-months {
                font-size: 14px;
            }
        }
        
        @media (max-width: 480px) {
            .flatpickr-calendar {
                font-size: 12px;
                width: 280px;
            }
            
            .flatpickr-day {
                height: 30px;
                line-height: 30px;
                max-width: 30px;
            }
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-12">
                <h1><%= stock.name %> (<%= stock.code %>)</h1>
                
                <!-- 当前价格信息 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5>当前价格信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <h6>当前价格</h6>
                                <h4 class="price-up">¥<%= latestPrice.price %></h4>
                            </div>
                            <div class="col-md-3">
                                <h6>开盘价</h6>
                                <p>¥<%= latestPrice.open_price %></p>
                            </div>
                            <div class="col-md-3">
                                <h6>收盘价</h6>
                                <p>¥<%= latestPrice.close_price %></p>
                            </div>
                            <div class="col-md-3">
                                <h6>更新时间</h6>
                                <p><%= new Date(latestPrice.timestamp).toLocaleString('zh-CN') %></p>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-3">
                                <h6>最高价</h6>
                                <p class="price-up">¥<%= latestPrice.high_price %></p>
                            </div>
                            <div class="col-md-3">
                                <h6>最低价</h6>
                                <p class="price-down">¥<%= latestPrice.low_price %></p>
                            </div>
                            <div class="col-md-3">
                                <h6>最高涨幅</h6>
                                <p class="price-up"><%= statistics.maxGain %>%</p>
                            </div>
                            <div class="col-md-3">
                                <h6>最高跌幅</h6>
                                <p class="price-down"><%= statistics.maxLoss %>%</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 筛选表单 -->
                <div class="filter-form">
                    <h5>数据筛选</h5>
                    <form method="GET" action="/stock/<%= stock.id %>">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="startDate" class="form-label">开始日期</label>
                                <input type="text" class="form-control flatpickr-input" id="startDate" name="startDate" value="<%= pagination.startDate %>" placeholder="选择开始日期" readonly>
                            </div>
                            <div class="col-md-3">
                                <label for="endDate" class="form-label">结束日期</label>
                                <input type="text" class="form-control flatpickr-input" id="endDate" name="endDate" value="<%= pagination.endDate %>" placeholder="选择结束日期" readonly>
                            </div>
                            <div class="col-md-2">
                                <label for="limit" class="form-label">每页显示</label>
                                <select class="form-select" id="limit" name="limit">
                                    <option value="10" <%= pagination.pageSize == 10 ? 'selected' : '' %>>10条</option>
                                    <option value="20" <%= pagination.pageSize == 20 ? 'selected' : '' %>>20条</option>
                                    <option value="50" <%= pagination.pageSize == 50 ? 'selected' : '' %>>50条</option>
                                    <option value="100" <%= pagination.pageSize == 100 ? 'selected' : '' %>>100条</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">&nbsp;</label>
                                <div>
                                    <button type="submit" class="btn btn-primary">筛选</button>
                                    <a href="/stock/<%= stock.id %>" class="btn btn-secondary">重置</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
      
                <!-- 价格历史 -->
                <div class="card">
                    <div class="card-header">
                        <h5>价格历史 (共 <%= pagination.total %> 条记录)</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>时间</th>
                                        <th>当前价格</th>
                                        <th>开盘价</th>
                                        <th>收盘价</th>
                                        <th>最高价</th>
                                        <th>最低价</th>
                                        <th>最高涨幅</th>
                                        <th>最低涨幅</th>
                                        <th>涨跌幅</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <% priceHistory.forEach(price => { %>
                                    <tr>
                                        <td><%= new Date(price.timestamp).toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' }) %></td>
                                        <td>¥<%= price.price ? parseFloat(price.price).toFixed(2) : '-' %></td>
                                        <td>¥<%= price.open_price ? parseFloat(price.open_price).toFixed(2) : '-' %></td>
                                        <td>¥<%= price.close_price ? parseFloat(price.close_price).toFixed(2) : '-' %></td>
                                        <td class="price-up">¥<%= price.high_price ? parseFloat(price.high_price).toFixed(2) : '-' %></td>
                                        <td class="price-down">¥<%= price.low_price ? parseFloat(price.low_price).toFixed(2) : '-' %></td>
                                        <td>
                                            <% if (price.high_price && price.open_price) { %>
                                                <% const maxGain = ((parseFloat(price.high_price) - parseFloat(price.open_price)) / parseFloat(price.open_price) * 100).toFixed(2); %>
                                                <span class="<%= maxGain > 0 ? 'price-up' : (maxGain < 0 ? 'price-down' : 'price-equal') %>">
                                                    <%= maxGain %>%
                                                </span>
                                            <% } else { %>
                                                -
                                            <% } %>
                                        </td>
                                        <td>
                                            <% if (price.low_price && price.open_price) { %>
                                                <% const maxLoss = ((parseFloat(price.low_price) - parseFloat(price.open_price)) / parseFloat(price.open_price) * 100).toFixed(2); %>
                                                <span class="<%= maxLoss > 0 ? 'price-up' : (maxLoss < 0 ? 'price-down' : 'price-equal') %>">
                                                    <%= maxLoss %>%
                                                </span>
                                            <% } else { %>
                                                -
                                            <% } %>
                                        </td>
                                        <td>
                                            <% if (price.close_price && price.open_price) { %>
                                                <% const change = ((parseFloat(price.close_price) - parseFloat(price.open_price)) / parseFloat(price.open_price) * 100).toFixed(2); %>
                                                <span class="<%= change > 0 ? 'price-up' : (change < 0 ? 'price-down' : 'price-equal') %>">
                                                    <%= change %>%
                                                </span>
                                            <% } else { %>
                                                -
                                            <% } %>
                                        </td>
                                    </tr>
                                    <% }); %>
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- 分页控件 -->
                        <% if (pagination.totalPages > 1) { %>
                        <nav aria-label="价格历史分页">
                            <ul class="pagination justify-content-center">
                                <% if (pagination.currentPage > 1) { %>
                                <li class="page-item">
                                    <a class="page-link" href="?page=<%= pagination.currentPage - 1 %>&startDate=<%= pagination.startDate %>&endDate=<%= pagination.endDate %>&limit=<%= pagination.pageSize %>">上一页</a>
                                </li>
                                <% } %>
                                
                                <% for (let i = Math.max(1, pagination.currentPage - 2); i <= Math.min(pagination.totalPages, pagination.currentPage + 2); i++) { %>
                                <li class="page-item <%= i === pagination.currentPage ? 'active' : '' %>">
                                    <a class="page-link" href="?page=<%= i %>&startDate=<%= pagination.startDate %>&endDate=<%= pagination.endDate %>&limit=<%= pagination.pageSize %>"><%= i %></a>
                                </li>
                                <% } %>
                                
                                <% if (pagination.currentPage < pagination.totalPages) { %>
                                <li class="page-item">
                                    <a class="page-link" href="?page=<%= pagination.currentPage + 1 %>&startDate=<%= pagination.startDate %>&endDate=<%= pagination.endDate %>&limit=<%= pagination.pageSize %>">下一页</a>
                                </li>
                                <% } %>
                            </ul>
                        </nav>
                        <% } %>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 初始化日期选择器
        document.addEventListener('DOMContentLoaded', function() {
            // 配置flatpickr
            const flatpickrConfig = {
                locale: 'zh',
                dateFormat: 'Y-m-d',
                allowInput: true,
                clickOpens: true,
                theme: 'light',
                maxDate: 'today',
                onChange: function(selectedDates, dateStr, instance) {
                    // 可以在这里添加日期变化时的逻辑
                }
            };
            
            // 初始化开始日期选择器
            const startDatePicker = flatpickr('#startDate', {
                ...flatpickrConfig,
                onClose: function(selectedDates, dateStr, instance) {
                    // 当选择开始日期后，更新结束日期的最小值
                    if (selectedDates.length > 0) {
                        endDatePicker.set('minDate', selectedDates[0]);
                    }
                }
            });
            
            // 初始化结束日期选择器
            const endDatePicker = flatpickr('#endDate', {
                ...flatpickrConfig,
                onClose: function(selectedDates, dateStr, instance) {
                    // 当选择结束日期后，更新开始日期的最大值
                    if (selectedDates.length > 0) {
                        startDatePicker.set('maxDate', selectedDates[0]);
                    }
                }
            });
            
            // 如果有初始值，设置日期范围限制
            const startDateValue = document.getElementById('startDate').value;
            const endDateValue = document.getElementById('endDate').value;
            
            if (startDateValue) {
                endDatePicker.set('minDate', startDateValue);
            }
            if (endDateValue) {
                startDatePicker.set('maxDate', endDateValue);
            }
        });
        
        // 自动刷新页面
        setTimeout(() => {
            window.location.reload();
        }, 30000); // 30秒刷新一次
    </script>
</body>
</html>